// 名称：表格-模板
// 版本：1.0.0
// 作者：林淑珍
// 时间：2019年08月08日17:26:21

// 参数
// tableHead
//   label
//   prop:
//   width:
//   isSlot: 是否插槽 true
//   component: 公用组件
//   tableData

<template>
  <div class="ins-table">
    <!-- ins-table -->
    <el-table
      :data="tableData"
      v-bind="$attrs"
      :height="tableHeight"
      :empty-text="emptyText"
      class="el-table-xhxz"
      v-on="$listeners"
    >
      <el-table-column
        v-if="index"
        type="index"
        width="100"
        label="排名"
        align="center"
      />
      <template v-for="(head,ind) in tableHead">
        <!-- 自定义列 插槽 -->
        <slot
          v-if="head.isSlot===true"
          :name="head.prop"
          :head="head"
        />
        <!-- 默认列 -->
        <el-table-column
          v-else
          :key="`ins-table${ind}`"
          :label="head.label"
          :prop="head.prop"
          :width="head.width"
        />
      </template>

    </el-table>
  </div>
</template>
<script>
export default {
  name: 'InsTable',
  components: {},
  props: {
    tableHeight: { type: String, default: '320', required: false },
    tableHead: { type: Array, default: null, required: true },
    tableData: { type: Array, default: null, required: true },
    emptyText: { type: String, default: '暂无数据' },
    index: { type: Boolean, default: false } // 是否显示序号
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () { },
    async fetchData () { },
    render () { }
  }
}
</script>
<style lang="scss">
.ins-table {
  font-size: inherit;
   .el-table-column-opera{
    .el-button{
      i{
        font-size: 14px;
      }
    }
  }

   .el-table-xhxz {
    th {
      background: #E5E5E5;
      color: #101D37;
      font-weight: normal;
      padding: 9px 0;
    }
    td {
      color: #101D37;
    }
    &.el-table--striped {
      .el-table__body tr.el-table__row--striped td {
        background: #f7f7f7;
      }
    }
    .el-table__body tr.hover-row > td {
      background-color: #f2f5fc !important;
    }
    .el-table__body tr.el-table__row--striped td {
      background-color: #f2f5fc !important;
    }
  }
}
</style>
